<template>
    <div class="accessRecords">
        <el-scrollbar style="height: 100%">
            <div class="crumbs">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>出入记录</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="container">
                <div class="echartBox">
                    <div id="echarts-basedata">
                    </div>
                </div>
                <div class="accessTable">
                    <el-table :data="data" border class="table" ref="multipleTable" fit stripe highlight-current-row>
                        <el-table-column prop="id" label="id" sortable>
                        </el-table-column>
                        <el-table-column prop="time" label="时间">
                        </el-table-column>
                        <el-table-column prop="name" label="学生姓名">
                        </el-table-column>
                        <el-table-column prop="photo" label="照片">
                        <template slot-scope="scope">
                            <el-image style="width: 100%; height: 100%"
                                :src="`http://39.99.143.137:8000` + scope.row.photo" fit="fill"></el-image>
                        </template>
                        </el-table-column>
                        <el-table-column prop="status" label="在校状态" :formatter="formatter">
                            <template slot-scope="scope">
                                <span style="color: #00d1b2" v-if="scope.row.status == '在校'">{{scope.row.status}}</span>
                                <span style="color: #E6A23C" v-if="scope.row.status == '离校'">{{scope.row.status}}</span>
                                <span style="color: #409EFF" v-if="scope.row.status == '病假'">{{scope.row.status}}</span>
                                <span style="color: #F56C6C" v-if="scope.row.status == '缺勤'">{{scope.row.status}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>
<script>
export default {
    name: 'accessRecords',
    data() {
        return {
            tableData: []
        }
    },
    computed: {
        data() {

        }
    },
    mounted() {

    },
    methods: {

    }
}
</script>
<style lang="scss">
       .echartBox {
            width: 100%;
            height: 400px;
            background-color: #0099ff;
        }
        .accessTable {
            margin-top: 20px;
            width: 100%;
            height: 400px;
        } 
</style>